<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
<title>New JavaScript SDK</title>
</head>
<body>
	<script src="/js/jquery-1.8.1.min.js"></script>
	<div id="fb-root"></div>
	<h2>Updated JS SDK example</h2>
	<br />
	<div id="user-info"></div>
	<p>
		<button id="fb-auth">Login</button>
	</p>
	<script> 
		window.fbAsyncInit = function() { 
			FB.init({ appId: '148487568608874', 
				status: true, 
				cookie: true, 
				xfbml: true, 
				oauth: true});
			
			function updateButton(response) { 
				var button = document.getElementById('fb-auth'); 
				if (response.authResponse) { 
					//user is already logged in and connected 
					var userInfo = document.getElementById('user-info'); 
					FB.api('/me', function(response) { 
						userInfo.innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name; 
						button.innerHTML = 'Logout'; 
					}); 
					button.onclick = function() { 
						FB.logout(function(response) { 
							var userInfo = document.getElementById('user-info'); 
							userInfo.innerHTML=""; 
						}); 
					}; 
				} else { 
					//user is not connected to your app or logged out 
					button.innerHTML = 'Login'; 
					button.onclick = function() { 
						FB.login(function(response) { 
							if (response.authResponse) { 
								FB.api('/me', function(response) { 
									var userInfo = document.getElementById('user-info'); 
									userInfo.innerHTML = '<img src="https://graph.facebook.com/' 
										+ response.id + '/picture" style="margin-right:5px"/>' + response.name;
									alert(response);
									registerAuthentication(response);
								});	 
							} else { 
								window.location.reload();
							} 
						}, 
						{scope:'email'}); 
					};
				} 
			} 
			// run once with current status and whenever the status changes 
			FB.getLoginStatus(updateButton); 
			FB.Event.subscribe('auth.statusChange', updateButton);
			FB.Event.subscribe('auth.login', function(response) {
				registerAuthentication(response);
			});
		}; 
		(function() { 
			var e = document.createElement('script'); 
			e.async = true; 
			e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; 
			document.getElementById('fb-root').appendChild(e); 
		}()); 
		
		function registerAuthentication(response) {			
			/*
			authResponse: {      
    userID: ""         
    signedRequest: "",  
    expiresIn: "",     
    accessToken: */

			$('#authId').val(response.authResponse.userID);
			$('#authSignedRequest').val(response.authResponse.signedRequest);
			$('#authExpires').val(response.authResponse.expiresIn);
			$('#authAccessToken').val(response.authResponse.accessToken);
			alert($('#authContainer').serialize());
			$.ajax(
				{
					url: '/register-authentication',
					type: 'POST',
					data: $("#authContainer").serialize(),
					success:function(data) 
					{
						window.location.replace("/homepage/index");
						return false;
					}
				});		
			}
			
	</script>
	

	<form id="authContainer" action="/register-authentication" method="post">
		<input type="hidden" id="authId" name="authContainer.authId"/>
		<input type="hidden" id="authSignedRequest" name="authContainer.authSignedRequest"/>
		<input type="hidden" id="authExpires" name="authContainer.authExpires"/>
		<input type="hidden" id="authAccessToken" name="authContainer.authAccessToken"/>
	</form>
</body>
</html>